<script setup>
import '@vueup/vue-quill/dist/vue-quill.snow.css';
import { ref } from 'vue'

//用户搜索
const username=ref('')

//列表数据模型
const users = ref([
  {
    "id": '',
    "username": "",
    "password": "",
    "nickname": "",
    "email": "",
    "user_Pic": "",
    "userStatus":"",
    "createTime": "2023-09-03 11:55:30",
    "updateTime": "2023-09-03 11:55:30"
  }
])

//分页条数据模型
const pageNum = ref(1)//当前页
const total = ref(20)//总条数
const pageSize = ref(7)//每页条数

//当每页条数发生了变化，调用此函数
const onSizeChange = (size) => {
  pageSize.value = size
  userList()
}
//当前页码发生变化，调用此函数
const onCurrentChange = (num) => {
  pageNum.value = num
  userList()
}

//获取文章列表
import {userListService} from '@/api/user.js'
const userList = async () => {
  let params = {
    pageNum: pageNum.value,
    pageSize: pageSize.value,
    username: username.value ? username.value : null
  }
  let result = await userListService(params);

  //渲染视图
  total.value = result.data.total;
  users.value = result.data.items;
  console.log(result);
}

//调用函数
userList()//获取列表

import '@vueup/vue-quill/dist/vue-quill.snow.css'
//添加数据模型
const userModel = ref({
  id: '',
  username: '',
  password: '',
  nickname: '',
  email:'',
  userPic:'',
  userPower:''
})


//导入token
import {useTokenStore} from "@/stores/token.js";
const tokenStore = useTokenStore()
//清空模型的数据
const clearData = () => {
  userModel.value.id = '';
  userModel.value.username = '';
  userModel.value.password = '';
  userModel.value.nickname = '';
  userModel.value.email = '';
}

import {userPowerUpdateService} from '@/api/user.js'
import {ElMessage} from "element-plus";


const updateUserPower=async (row) => {
  let result = await userPowerUpdateService(row.id, row.userPower);
  ElMessage.success(result.msg ? result.msg : '更新成功');
  await userList()//获取列表
}

</script>

<template>
  <el-card class="page-container">
    <template #header>
      <div class="header">
        <span>用户权限</span>
        <!-- 搜索表单 -->
        <el-form inline>
          <el-form-item label="用户名">
            <el-input placeholder="请输入" v-model="username" style="width: 200px">
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="userList()">搜索</el-button>
            <el-button @click="userList();clearData()">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </template>
    <el-table :data="users" style="width: 100%" max-height="400">
<!--      <el-table-column fixed prop="date" label="登录日期" width="150" />-->
      <el-table-column prop="id" label="序号" width="120" />
      <el-table-column prop="username" label="用户名" width="120" />
      <el-table-column prop="nickname" label="昵称" width="120" />
      <el-table-column prop="userStatus" sortable label="状态" width="120" />
      <el-table-column prop="userPower" sortable label="权限" width="120" />
      <el-table-column prop="createTime" sortable label="注册日期" width="200" />
      <el-table-column prop="updateTime" sortable label="更新日期" width="200" />
      <el-table-column fixed="right" align="center" label="操作" min-width="150">
        <template #default="{ row }">
          <el-switch
              v-model="row.userPower"
              style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
              inline-prompt
              :active-value=1
              :inactive-value=0
              active-text="启用"
              inactive-text="禁用"
              @change="updateUserPower(row)"
          />
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页条 -->
    <el-pagination v-model:current-page="pageNum" v-model:page-size="pageSize" :page-sizes="[3, 5 ,10, 15]"
                   layout="jumper, total, sizes, prev, pager, next" background :total="total" @size-change="onSizeChange"
                   @current-change="onCurrentChange" style="margin-top: 20px; justify-content: flex-end" />
  </el-card>
</template>

<style scoped lang="scss">
.page-container {
  min-height: 100%;
  box-sizing: border-box;

  .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}
::v-deep .el-form-item{
    margin: 0 10px;
    font-size: 13px;   
}
</style>